Erratum - 404 Error pages + Coming soon + login

Introduction

  • Item Name : Erratum - 404 Error pages + Coming soon + login
  • Item Version : 4
  • Author : Ashish Maraviya
  • Copyright : 2024

First of all, Thank you so much for purchasing this 'Erratum template' and for being my loyal customer. You are awesome! You are entitled to get free lifetime updates to this product + exceptional support from the author directly.

This documentation is to help you regarding each step of customization. Please go through the documentation carefully to understand how this template is made and how to edit this properly. Basic HTML and CSS knowledge is required to customize this item. You may learn basics here and here.

Getting Started

Requirements

You will need the following sofwares to customize the pricing tables.

  1. Code Editing Software (eg: Dreamweaver, Sublime Text or Notepad)
  2. Web Browser for testing (eg: Google Chrome or Mozilla Firefox)
Note : Be careful while editing the item. If not edited properly, the design layout may break completely.

Include Files

  • HTML
  • CSS
  • SCSS
  • JS

Bootstrap (v 5.0.2) Grid System

If you want to use three column of pricing tables

<div class="container">										
	<div class="row">										
		<div class="col-lg-4  col-md-6">
			YOUR CODES GOES HERE
		</div>
	</div>
</div>

If you want to use four column of pricing tables

<div class="container-fluid">										
	<div class="row">										
		<div class="col-lg-3  col-md-6  col-12">
			YOUR CODES GOES HERE
		</div>
	</div>
</div>

Customization

HTML File Customization (for classic demo)

You can open index.html file in code editer software. Copy all code(Ex. if you want to use classic style) and paste in your website.

<!--
    Item Name: Erratum - 404 Error pages
    Author: Ashish Maraviya
    Version: 1.0
    Copyright 2021-2022
-->
<!DOCTYPE html> 
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Erratum – Multi purpose error page template for Service, corporate, agency, Consulting, startup.">
    <meta name="keywords" content="Error page 404, page not found design, wrong url">
    <meta name="author" content="Ashishmaraviya">
    <link rel="icon" href="assets/images/favicon.png" type="image/x-icon"/>
    <link rel="shortcut icon" href="assets/images/favicon.png" type="image/x-icon"/>
    <title>404 - Error page pack all in one</title>
    <!--Google font-->
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300&display=swap" rel="stylesheet">
    <!-- Bootstrap css -->
    <link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css">
    <!-- Theme css -->
    <link rel="stylesheet" type="text/css" href="assets/css/error-page.css">
    <link rel="stylesheet" type="text/css" href="assets/css/error-page-responsive.css">
</head>
<body>
    <!-- 01 Preloader -->
    <div class="loader-wrapper" id="loader-wrapper">
        <div class="loader"></div>
    </div>
    <!-- Preloader end -->
    <!-- 02 Main page -->
    <section class="page-section">
        <div class="full-width-screen">
            <div class="container-fluid">
                <div class="content-detail">
                    <h1 class="global-title"><span>4</span><span>0</span><span>4</span></h1>

                    <h4 class="sub-title">Oops!</h4>

                    <p class="detail-text">We're sorry,<br> The page you were looking for doesn't exist anymore.</p> 

                    <div class="back-btn">
                        <a href="index.html" class="btn">Back to Home</a>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- latest jquery-->
    <script src="assets/js/jquery-3.5.1.min.js"></script>
    <!-- Theme js-->
    <script src="assets/js/script.js"></script>
</body>
</html>

Main CSS File Customization (for classic demo)

You can go to css folder and open "error-page.css" file in code editer software. Copy all code and paste in your website

/*==============
  [01] Page css
  =================*/
  .page-section {
    background-image: url("../images/background-1.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
.page-section .content-detail {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column; 
}
.page-section .content-detail .sub-title, .page-section .content-detail .detail-text {
  display: block;
  color: #5076db;
  text-align: center; 
}
.page-section .content-detail .sub-title {
  margin-bottom: 15px;
  font-weight: 600;
  font-size: 30px; 
}
.page-section .content-detail .global-title {
  display: block;
  color: #5bc86d;
  font-size: 150px;
  font-weight: 800; 
}
.page-section .content-detail .global-title span {
  animation: animateblur 1s linear forwards; 
}
.page-section .content-detail .global-title span:nth-child(1) {
  animation-delay: 1s; 
}
.page-section .content-detail .global-title span:nth-child(2) {
  animation-delay: 2s; 
}
.page-section .content-detail .global-title span:nth-child(3) {
  animation-delay: 3s; 
}
@keyframes animateblur {
  0% {
    opacity: 0;
    filter: blur(10px); 
  }
  100% {
    opacity: 1;
    filter: blur(0px); 
  } 
}
.page-section .content-detail .back-btn {
  margin-top: 15px; 
}
.page-section .content-detail .back-btn .btn {
  padding: 8px 15px;
  color: #5076db;
  border: 1px solid #5076db;
  border-radius: 30px;
  font-size: 14px; 
}
.page-section .content-detail .back-btn .btn:hover {
  background-color: #5076db;
  color: #fff; 
}

Responsive CSS File Customization (for classic demo)

You can go to css folder and open error-page-responsive.css file in code editer software. Copy all code and paste in your website

/* Responsive CSS File 
  ===================
    Item Name: Erratum - 404 Error pages
    Author: Ashish Maraviya
    Version: 1.0
    Copyright 2021-2022
    ===================
    */
    @media (max-width: 768px) {
      .page-section .content-detail {
        padding: 0 15px; 
      }
      .page-section .content-detail .global-title {
        font-size: 120px;
        font-weight: 700; 
      }
      .page-section .content-detail .sub-title {
        font-weight: 500;
        font-size: 25px; 
      }
      .page-section .content-detail .detail-text {
        font-size: 14px; 
      } 
    }
    @media (max-width: 480px) {
      .page-section .content-detail {
        padding: 0 15px; 
      }
      .page-section .content-detail .global-title {
        font-size: 80px;
        font-weight: 600; 
      }
      .page-section .content-detail .sub-title {
        font-weight: 500;
        font-size: 22px; 
      } 
    }

Custom Font Colors (for classic demo)

Erratum use two types of color #5bc86d(Green color), #5076db(Blue color)

For example : you can change color red and green. to replace with #5bc86d, #5076db

Hex Code

For example : you can change color #FF0000 and #008000. to replace with #5bc86d, #5076db

#5bc86d color replace with #FF0000 color code in all places.

#5076db color replace with #008000 color code in all places.

Thank You

Thank you again for download Erratum Template, enjoy it and give us ratting.